<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>租金柱状图</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <style>

    </style>
</head>
<body>
<h1 align="center">租金柱状图</h1>
<!--下拉选择排序方式-->
查询顺序<select id="s1" name="sequence">
    <option value="默认">默认</option>
    <option value="由高到低">由高到低</option>
</select>
查询地址<select  id="a1" name="province">
</select>
<input type="button" value="查询" onclick="showChartWindow()" />
<div align="center">
<div id="win1" class="mini-window" title="BarChart" style="width:880px;height:650px;"
     showToolbar="false" showFooter="true" showModal="true" allowResize="true" >
    <div id="chartContainer" style="height:100%;width:100%;"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        showAddressList();
        getData();
    });
    // 基于准备好的dom，初始化echarts实例
    function generateChart(data) {
        var myChart = echarts.init(document.getElementById('chartContainer'))
        var option = {
            title: {
                text: '每个医院的租金',
                subtext: '纯属虚构',
                x: 'center'
            },
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: data.hospitalName,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '租金',
                    type: 'bar',
                    barWidth: '60%',
                    data: data.hospitalRent
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    //buttion调用的方法
    function getData() {
        //获得排序下拉框的值
        var sequences = $("#s1").val();
         var provinces= $("#a1").val();
        //异步请求
        $.post("../statistics/selectListDo",//访问地址
            {"sequence":sequences,"province":provinces},//携带的参数
            function (data) {
                generateChart(data);
            },
            "json"
        );
    }
    /*展示柱状图*/
    function showChartWindow() {
        getData();
    }
    /*地址信息*/
    function showAddressList() {
        var str = "";
        $.post("../statistics/addressList",function (data) {
            $.each(data.addressList,function (index,address) {
                str+="<option value='"+address.province+"'>"+address.province;
                str+="</option>";
            });
            $("#a1").html(str);
        },"json");
    }
</script>